@page "/composition"
@inherits LiveComponentBase<CompositionState.Local, CompositionState>

@{
    var local = Local;
    var state = State;
    var lastUpdateError = LiveState.LastUpdateError; 
}

<h1>Composition</h1>

@if (lastUpdateError != null) {
    <div class="alert alert-warning" role="alert">
        Update error: @lastUpdateError.Message
    </div>
}

<div class="input-group pb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Parameter</span>
    </div>
    <input class="form-control" 
           @bind-value="@local.Parameter"
           @bind-value:event="oninput" />
</div>

<div class="d-flex">
    <div class="col-6">
        <ComposedValueCard
            Title="Locally composed value"
            Source="@state.LocallyComposedValue"/>
    </div>
    <div class="col-6">
        <ComposedValueCard
            Title="Remotely composed value"
            Source="@state.RemotelyComposedValue"/>
    </div>
</div>

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        UpdateLocal(s => s.LiveState = LiveState);
    }
}
